<template>
	<view style="width: 100%;height: 100%">
		<view class="content" v-if="isToken && isTourist == false">

			<view class="uni_navBox">
				<view class="uni_kongBox" :style="{'z-index':zIndex}">
					<view class="contenter">
						<view class="text-area" style="background: #fff;">
							<view class="box box-pack-end">
								<!-- <u-tabs :list="list2" @change="handleTabChange" :current="current"></u-tabs> -->
								<view class="filter box box-align-center box-pack-center"
									style="display: flex; align-items: center; margin-right: 1rem;"
									@click="handleFilter">
									<u-icon name="list-dot" color="#000000" size="28"></u-icon>
									<span>筛选</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 进行中 -->
			<view style="height: 100%;position: relative;">
				<!-- <view style="width: 100%;height: 80rpx;"></view> -->
				<view class="box box-tb" v-if="rwlist.length !=0">
					<view class="" style="overflow-y: auto;width:100%;height: calc(100% - 240rpx)">
						<view class="uni_k" style="height: 84rpx;"></view>
						<view class="u-box " v-for="(item,index) in rwlist" :key="index" @click="goDetail(item)">
							<!-- 时间 -->
							<view class="box box-pack-end">
								<!-- <view class="u_left">2023-02-24 12:00:00  截至</view> -->
								<!-- <view class="u_reight">
									<u-icon name="zhuanfa" color="#000000" size="28"
										style="margin-right: 20rpx;"></u-icon>
								</view> -->
							</view>
							<!-- 下 -->
							<view class="u_boxBtm">
								<!-- <u-avatar :src="item.image" mode="square" size="160" class="u_img"></u-avatar> -->
								<image :src="item.image" mode="" class="u_img"></image>
								<!-- <u-avatar :src="item.image" mode="cover" size="160" class="u_img"></u-avatar> -->
								<view class="box box-tb box-align-start box-pack-start ml10 u_imgRight">
									<view class="posr">
										<!-- 标题 -->
										<view class="title">{{item.title}}</view>
										<view class="tips" v-if="item.wpy !=0">
											未批阅 +{{item.wpy}}
										</view>
									</view>
									<view class="u_center">
										<text class="u_centerText">{{`${item.sjtypename1}/${item.sjtypename2}`}}</text>
									</view>
									<view class="u_palyCard" style="margin-top: 14rpx;">
										<text class="u_palyCardT">已打卡（<text class="u_one one">{{item.wcs}}</text>/
											<text class="u_two one">{{item.bjrs}}</text>）</text>
									</view>
									<!-- 进度条 -->
									<view class="progress box box-align-center" style="margin: 0 0 0 16rpx;">
										<u-line-progress :percent="item.wcl" :round="true" striped-active="true"
											active-color="#ff9900" show-percent="false"
											style="width: 100%;height: 16rpx;"></u-line-progress>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<noData class="no-data" title="暂无实践任务" v-else></noData>
			</view>
		</view>

		<!-- 还未绑定学校 -->
		<view class="pos-center box box-tb box-align-center box-pack-center" v-else-if="isToken && isTourist">
			<noData title="还未绑定学校"></noData>
			<text style="color: #606266	;" @click="goBind">去绑定</text>
		</view>

		<!-- 登录查看更多内容 -->
		<view class="pos-center nodata box box-tb box-align-center box-pack-center" v-else>
			<view>登录查看更多内容</view>
			<u-button type="primary" @click="Login" :custom-style="customStyle">登录查看</u-button>
		</view>

		<!-- 筛选框 -->
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<scroll-view scroll-y="true" style="height: 800rpx;">
				<view :style="{paddingTop: role == 'team'?`0rpx`:`100rpx`}">
					<!-- 学校 -->
					<view class="mt20" style="padding:40rpx;" v-if="role == 'team'">
						<view class="" style="margin-bottom: 30rpx;">
							<u-search shape="round" placeholder="请输入搜索的学校" class="ml5" v-model="searchText"
								@custom="search" @search="search"></u-search>
						</view>
						<view class="box box-align-center box-pack-between">
							<text class="tip">学校</text>
							<view class="box box-align-center" @click="showMoreSchool = !showMoreSchool">
								<text class="mr5 more">{{showMoreSchool?`收起`:`更多`}}</text>
								<u-icon :name="showMoreSchool?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreSchool == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in schoolList" :key="index"
								:class="{active:item.id == schoolid}" @click="selectSchool(item)">
								{{item.name}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<!-- 专业 -->
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">专业</text>
							<view class="box box-align-center" @click="showMoreZy = !showMoreZy">
								<text class="mr5 more">{{showMoreZy?`收起`:`更多`}}</text>
								<u-icon :name="showMoreZy?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center" :style="{display:showMoreZy == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in zyLists" :key="index"
								:class="{active:item.zydm == zydm}" @click="selectZy(item)">
								{{item.zymc}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<!-- 班级 -->
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">班级</text>
							<view class="box box-align-center" @click="showMoreClass = !showMoreClass">
								<text class="mr5 more">{{showMoreClass?`收起`:`更多`}}</text>
								<u-icon :name="showMoreClass?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreClass == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in classList" :key="index"
								:class="{active:item.value == classid}" @click="selectClass(item)">
								{{item.label}}
								<view class="act"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 按钮 -->
			<view class="confrim-btn box box-align-center box-pack-around">
				<u-button :custom-style="customStyleReset" @click="reset">重置</u-button>
				<u-button :custom-style="customStyleComfirm" @click="comfirm">确定</u-button>
			</view>
		</u-popup>

		<bind-mobile :show="BindShow" @handleClose="handleClose"></bind-mobile>
		<view-tabbar></view-tabbar>
	</view>

</template>

<script>
	import {
		makeCanvas
	} from "../../common/canvas.js";

	import mixinDevice from "@/common/mixins.js"

	export default {
		mixins: [mixinDevice],
		data() {
			return {
				// searchText: uni.getStorageSync('currSchool').name,
				searchText: '',
				customStyle: {
					marginTop: '67rpx',
					width: '260rpx',
					height: '90rpx',
					background: '#3541F3',
					boxShadow: '0rpx 8rpx 27rpx 0rpx rgba(53,65,243,0.21)',
					borderRadius: '20rpx'
				},
				current: 0,
				token: uni.getStorageSync("token"),
				form: {
					xj: '',
					xjId: '',
					zy: '',
					zyId: '',
					bj: '',
					bjId: ''
				},
				currSchool: uni.getStorageSync('currSchool'),
				role: uni.getStorageSync('role'),
				user: uni.getStorageSync("user"),
				plan: {},
				rwlist: [],
				value: 30,
				show: false,
				zylist: [],
				zyValue: '',
				zyTitle: '全部专业',
				bjlist: [{
					label: '全部班级',
					value: ''
				}],
				bjValue: '',
				bjTitle: '全部班级',
				cjList: [],
				zsList: [],
				zIndex: 100000000,
				list2: [{
						name: '进行中'
					},
					{
						name: '已结束'
					}
				],
				showMoreSchool: true,
				schoolList: [],
				showMoreZy: false,
				zyLists: [],
				classList: [],
				showMoreClass: false,
				pages: {
					pageSize: 10,
					pageNum: 1,
					totalPages: 0
				},
				customStyleReset: {
					width: '222rpx',
				},
				customStyleComfirm: {
					width: '450rpx',
					backgroundColor: "#626BF1",
					color: "#fff"
				},
				schoolid: uni.getStorageSync('currSchool').id,
				zydm: '',
				classid: '',
			};
		},
		onLoad() {
			if (this.isToken) {
				if (this.isTourist == false) {
					if (this.role == 'team') {
						this.getSchool()
					} else {
						this.getZy()
					}
					// this.classLdsjList();
				}

			}
		},
		computed: {
			isTeamRole() {
				return this.role == 'team'
			}
		},
		watch: {
			searchText(newWord) {
				// console.log(newWord, 'newWordnewWordnewWord')
				// 当搜索关键词为空时触发自动搜索
				if (newWord.trim() === '') {
					this.getSchool();
				}
			}
		},
		methods: {
			classLdsjList() {
				this.rwlist = []
				this.$api.post({
					url: '/yclassldsjtask/schoolLdsjList'
				}, {
					schoolid: this.schoolid,
					zydm: this.zydm,
					classid: this.classid
				}).then(res => {
					console.log(res, '获取为null的数据')
					this.rwlist = res.list;
				})
			},

			// 跳转详情
			goDetail(item) {
				console.log(item)
				console.log(item.ldsjid, item.sjlistid, item.classid, '点击详情传输的值')
				uni.navigateTo({
					url: '/pageHome/sjDetail?id=' + item.ldsjid + '&planid=' + item.sjlistid + '&classid=' + item
						.classid
				})
			},

			publicl() {
				wx.vibrateShort();
				uni.navigateTo({
					url: "/team/kc/pubSjTask"
				})
			},
			open() {
				this.zIndex = 100000000
				this.$refs.uDropdown.highlight();
			},

			close(index) {
				// this.zIndex = 0
				this.$refs.uDropdown.highlight(index);
			},
			// 点击tabs切换导航
			handleTabChange(index) {
				this.current = index;
			},
			//筛选
			handleFilter() {
				console.log(this.value);
				this.show = true
				// this.getSchool()
			},

			// 筛选中搜索学校
			search() {
				this.getSchool()
			},

			//查询学校
			getSchool() {
				let opts = {
					url: '/yschool/pageSchoollist',
					method: 'post'
				};
				let params = {
					searchText: this.searchText,
					pageNum: 1,
					pageSize: 6000
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					uni.hideToast()
					if (res.code == 0) {
						this.schoolList = res.list.list
						this.schoolid = res.list.list[0].id
						this.getZy()
					}
				})
			},

			//选中的学校
			selectSchool(item) {
				this.schoolid = item.id
				this.pages.pageNum = 1
				this.getZy()
			},

			//查询专业
			getZy() {
				let opts = {
					url: '/dzy/list',
					method: 'post'
				};
				let params = {
					schoolid: this.schoolid,
					searchText: "",
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.zyLists = res.list
						this.zydm = res.list[0].zydm
						this.getClass()
					}
				})
			},

			// 选中的专业
			selectZy(item) {
				this.zydm = item.zydm
				this.pages.pageNum = 1
				this.getClass()
			},

			//查询班级
			getClass() {
				let opts = {
					url: '/dclass/listBj',
					method: 'post'
				};
				let params = {
					schoolid: this.schoolid,
					zydm: this.zydm,
				};
				this.$api.post(opts, params).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.classList = res.list
						this.classid = res.list[0].value
						this.classLdsjList()
					}
				})
			},

			// 选中的班级
			selectClass(item) {
				this.pages.pageNum = 1
				this.classid = item.value
			},

			//确定
			comfirm() {
				this.show = false
				this.classLdsjList()
			},

			// 重置
			reset() {
				this.schoolid = ''
				this.zydm = ""
				this.classid = ""
				this.value = ""
				this.show = false
			}

		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.r-input {
		width: 540rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
	}

	.filter {
		width: 163rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
	}

	.list {}

	.item {
		position: relative;
		padding: 22rpx 38rpx 55rpx 38rpx;
		min-height: 330rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 23rpx 46rpx 0rpx rgba(205, 207, 230, 0.18);
		border-radius: 20rpx;
	}

	.zy {
		padding: 0 5px;
		width: auto;
		height: 36rpx;
		line-height: 36rpx;
		background: #F0F1F8;
		border-radius: 18rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.score {
		position: absolute;
		top: 0;
		right: 0;
		width: 91rpx;
		height: 53rpx;
		line-height: 53rpx;
		background: #FFF9EC;
		border-radius: 0rpx 20rpx 0rpx 12rpx;
		color: #FF943B;
		font-size: 26rpx;
		text-align: center;
	}

	.tip {
		font-size: 33rpx;
		font-weight: bold;
		color: #000000;
	}

	.more {
		color: #A6AAB7;
		font-size: 26rpx;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.school-list {
		position: relative;
		padding: 0 40rpx;
		margin-right: 28rpx;
		margin-top: 24rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #F8F9FD;
		border-radius: 14rpx;
		text-align: center;
		color: #5F6572;
		font-size: 28rpx;

		.act {
			display: none;
			position: absolute;
			bottom: 0;
			right: 0;
			width: 25px;
			height: 22px;
		}

		&.active {
			color: #3440FF;
			background: #E4EDFC;
		}

		&.active .act {
			display: block;
			background: url(https://www.wytldy.com/file/wxIMG/images/active.png) repeat center;
		}
	}

	.confrim-btn {
		padding-bottom: 40rpx;
	}
</style>
<style scoped lang="scss">
	.u-box {
		// background-color: #aef;
		display: flex;
		flex-direction: column;
		margin-top: 25rpx;
		background: #fff;

		.u_boxTimeTop {
			display: flex;
			justify-content: end;
			margin: 25rpx 0 0 26rpx;

			.u_left {
				height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #5F6572;
			}

			.u_right {}
		}

		.u_boxBtm {
			display: flex;
			margin-top: 42rpx;

			.u_img {
				margin-left: 24rpx;
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				/* 等比例撑满 */
				background-size: cover;
				/* 图片居中显示 */
				background-position: center;
				// border-radius: 50%;
			}

			.u_imgRight {}
		}
	}

	.public {
		position: fixed;
		right: 52rpx;
		bottom: 38rpx;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		background: linear-gradient(180deg, #7686F6, #626BF1);
		box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
		font-size: 28rpx;
		color: #fff;
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}

	.main {
		width: 100%;
		height: 100%;
	}

	.bgcfff {
		background-color: #fff;
		box-sizing: border-box;
	}

	.posr {
		width: 100%;
		position: relative;
		font-size: 32rpx;
		font-weight: 600;
		margin-left: 15rpx;

		.tips {
			position: absolute;
			top: -21rpx;
			right: 0;
			width: 140rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #FF5A77;
			border-radius: 26rpx;
			font-size: 20rpx;
			text-align: center;
			// color: #fff;
		}
	}

	.u_center {
		// margin-top: 12rpx;

		.u_centerText {
			margin-left: 20rpx;
			// width: 222rpx;
			height: 22rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #888F9E;
		}
	}

	.u_palyCard {
		// margin-top: 36rpx;

		.u_palyCardT {
			margin-left: 20rpx;
			height: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #888F9E;

			.u_one {}

			.u_two {}

			.one {
				// width: 144rpx;

			}
		}
	}

	.limit-time {
		color: #5F6572;
		font-size: 22rpx;
	}

	.progress {
		margin-top: 20rpx;
		width: 80%;
	}

	.sliders {
		width: 80%;
	}

	// 导航栏
	.content {
		width: 100%;
		overflow-y: auto;
		height: calc(100% - 160rpx);
		position: relative;

		.uni_navBox {
			position: fixed;
			// left: 0;
			top: -2px;
			width: 100%;
			height: 86rpx;
			// background: #aef;
			z-index: 99;
			overflow: hidden;

			.uni_kongBox {
				// position: fixed;
			}
		}

		// .data-v-5bdd9ba6{
		// 	.box{
		// 		margin-top: 160rpx;
		// 	}
		// }
		// .data-v-5bdd9ba6 {
		// 	.box {
		// 		.data-v-e8b858de {
		// 			margin-top: 200rpx;
		// 		}
		// 	}
		// }
		/deep/ .nodata.data-v-e8b858de {
			margin-top: 160rpx;
			// margin-top: 150rpx;
		}
	}

	// .data-v-e8b858de{
	// 	margin-top: 146rpx;
	// }
	// .uniBox {
	// 	margin-top: 200rpx;
	// }

	.percent {
		font-size: 25rpx;
	}

	.cnt {
		color: #7686F6;
	}

	.title {
		width: 400rpx;
		// height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2F3142;
		line-height: 42rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// padding: 0 40rpx;
		// height: 128rpx;
		// line-height: 128rpx;
		// border-bottom: 2rpx solid #EEF4F8;
		// font-size: 26rpx;
		// color: #959AA5;

		.edit-score {
			color: #FF5A77;
		}
	}

	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}

	.flex-2 {
		color: #626BF1;
	}

	.item-list {
		padding: 5rpx 30rpx;
		width: 500rpx;
		height: 72rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		color: #AEB8CF;
		font-size: 28rpx;
	}

	.zymcspan {
		font-size: 12px;
		color: gray;
		position: absolute;
		right: 0;
	}

	.items {
		padding: 0 20px;
	}

	.no-data {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>